<template>
    <div class="planePopup_container">
        <div class="title" :class="titleClass">
            {{ data.infoData.consequenceLevelDesc }}高后果区
        </div>
        <div class="content">
            <div class="row">
                <div :title="data.infoData.consequenceName" class="over" style="cursor: pointer;width:400px" @click="routerpath">高后果区名称：{{ data.infoData.consequenceName }}</div>
            </div>
            <div class="row">
                管道名称：{{ data.infoData.ppName }}
            </div>
            <div class="row">
                接收单位：{{ data.infoData.responsibleUnitName }}
            </div>
            <div class="row">
                <div>高后果区长度：<span class="">{{ data.infoData.consequenceLength }}m</span></div>
                <div style="float: right;">等级：<span class="">{{ data.infoData.consequenceLevelDesc }}</span></div>
            </div>
            <div class="row">
                <div>高后果区类型：<span class="">{{ data.infoData.consequenceTypeDesc }}</span></div>
                <div style="float: right;">责任人：<span class="">{{ data.infoData.liable }}</span></div>
            </div>
            <div class="row">
                <div style="display: flex;">识别报告：<div :title="data.infoData.consequenceFile?data.infoData.consequenceFile.filePlanName:''" class="higtlight over" @click="clickFile(data.infoData.consequenceFile.filePlanPath)">{{  data.infoData.consequenceFile?data.infoData.consequenceFile.filePlanName:''
                }}</div></div>
                <div style="float: right;display: flex;">应急预案：<div :title="data.infoData.consequenceFile?data.infoData.consequenceFile.fileFilingName:''" class="higtlight over" @click="clickFile(data.infoData.consequenceFile.fileFilingPath)">{{ data.infoData.consequenceFile?data.infoData.consequenceFile.fileFilingName:'' }}</div></div>
            </div>
            <div class="row2">
                识别时间：<span class="">{{ dayjs(data.infoData.discriminateDate).format('YYYY-MM-DD') }}</span>
            </div>
        </div>
        <div class="btn1" @click.stop="selectCamera">
            <img style="margin-top: -2px;" src="@/assets/mapbox/images/planePopup/btn1.png" /> <span
                style="margin-left: 6px;">监控视频</span>
        </div>
        <div class="btn2" @click.stop="flyTo">
            <img src="@/assets/mapbox/images/planePopup/btn2.png" /> <span style="margin-left: 6px;">缩放该区域</span>
        </div>
    </div>
</template>
<script setup>

import {
    defineComponent,
    ref,
    reactive,
    computed,
    toRefs,
    onMounted
} from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
import mitt from '@/utils/mitt.js';
import dayjs from 'dayjs'
import Router from '@/router';
const props = defineProps({
    info: {
        type: Object,
        default: {}
    }
})

const level = computed(() => {
    let l = props.info.consequenceLevelValue
    if (l == '1') {
        return 'Ⅰ'
    } else if (l == '2') {
        return 'Ⅱ'
    } else {
        return 'Ⅲ'
    }
})

const titleClass = computed(() => {
    let ob = {}
    let l = props.info.consequenceLevelValue
    if (l == '1') {
        ob.title_1 = true
    } else if (l == '2') {
        ob.title_2 = true
    } else {
        ob.title_3 = true
    }
    return ob;
})

function flyTo() {
    mitt.emit('flyToGHG');
}
function selectCamera() {
    let id = props.info.id;
    consequenceDesc({ id: id }).then((res) => {
        mitt.emit('selectCamera', res.data);
    })
}


const getRoute = useRoute()
const router = useRouter()
const data = reactive({
    titleClass: {},
    infoData: {}
})
onMounted(() => {
    setData()
})

async function setData() {

    const req = await getPlaneInfoById(props.info.id)
    data.infoData = req.data
	console.log(data)
    //console.log(data.infoData)

}
function routerpath() {
    const url = Router.resolve({
        path: '/integrityManagement/ghg/manage',
        query: {
            consequenceName: data.infoData.consequenceName,
        }
    });
    window.open(url.href);
}

function clickFile(url) {
    // let url1 = 'http://47.93.85.245:9000/ydx-file/attach/2023-07-19/%E6%9C%AA%E5%91%BD%E5%90%8D1_%E5%8A%A0%E6%B0%B4%E5%8D%B0.pdf'
    // let url1 = 'ydx-file/attach/2023-07-19/%E6%9C%AA%E5%91%BD%E5%90%8D1_%E5%8A%A0%E6%B0%B4%E5%8D%B0.pdf'
    // let url1 = 'http://47.93.85.245:9000/ydx-file/attach/2023-07-19/wdsa.docx'
    // let url1 = 'ydx-file/attach/2023-07-19/wdsa.docx'

    //项目内地址统一使用MINIO地址
    openFile.openfile(url)
}
defineExpose({
    setData,
});
</script>
<style lang="scss" scoped>
.planePopup_container {
    width: 400px;
    height: 200px;

    .title {
        color: #fff;
        padding: 4px 25px;
        height: 25px;
        width: 174px;
        position: absolute;
        top: 5px;
        left: 19px;
        font-size: 14px;
        background: url('@/assets/mapbox/images/planePopup/title1.png');
    }

    .title_1 {
        background: url('@/assets/mapbox/images/planePopup/title1.png');
    }

    .title_2 {
        background: url('@/assets/mapbox/images/planePopup/title2.png');
    }

    .title_3 {
        background: url('@/assets/mapbox/images/planePopup/title3.png');
    }

    .content {
        color: #fff;
        position: absolute;
        padding: 12px 20px;
        top: 30px;
        left: 0px;
        background: url('@/assets/mapbox/images/planePopup/bg1.png');
        width: 402px;
        height: 179px;
    }

    .row {
        margin-top: 2px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .row2 {
        margin-top: 2px;
        display: flex;
        align-items: center;
    }


    .btn1 {
        background: url('@/assets/mapbox/images/planePopup/bg_btn.png');
        display: flex;
        align-items: center;
        width: 110px;
        height: 30px;
        position: absolute;
        bottom: -40px;
        left: 20px;
        padding: 0px 10px;
        font-size: 12px;
        cursor: pointer;
    }

    .btn2 {
        display: flex;
        align-items: center;
        background: url('@/assets/mapbox/images/planePopup/bg_btn.png');
        width: 110px;
        height: 30px;
        position: absolute;
        bottom: -40px;
        left: 140px;
        padding: 0px 10px;
        font-size: 12px;
        cursor: pointer;
    }

    .higtlight {
        cursor: pointer;
        color: #4096ff;
        border-bottom: 1px solid #4096ff;
    }

    .over {
        width: 100px;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; // 默认不换行；
    }

}

:deep {}
</style>